<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主动式动画</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 500px;
            border: 2px solid aqua;
            margin: 20px;
        }
        .box div{
            width: 100px;
            height: 100px;
            /* 第一帧位置 */
            margin-left: 0;
            /* 动画时长 */
            transition-duration: 1s;
            margin-bottom: 10px;
        }
        .box:hover div{
            /* 最后一帧 */
            /* margin-left: 400px; */
        }
        .box:hover div:nth-child(1){
            /* 最后一帧 */
            margin-left: 400px;
        }
        .box:hover div:nth-child(2){
            /* 最后一帧 */
            margin-left: 400px;
            /* 动画延迟 */
            transition-delay: 400ms;
        }
        .box:hover div:nth-child(3){
            /* 最后一帧 */
            margin-left: 400px;
            /* 过渡的速率
            1)ease 默认值，先快后慢
            2)linear 匀速运动
            */
            transition-timing-function: cubic-bezier(.07,-0.69,.83,.67);
            /* steps 逐帧动画，将动画分为很多份，依次执行 */
        }
        .box:hover div:nth-child(4){
            /* 最后一帧 */
            margin-left: 400px;
            background-color: greenyellow;
        }
        /* 复合写法
            transition:property duration delay timing-function
            一般直接填s，可能会有填写延迟的情况
        */
        .box:hover div:nth-child(5){
            /* 最后一帧 */
            margin-left: 400px;
            background-color: green;
            transition: 2s;
        }
        .box div:nth-child(even){
            background-color: skyblue;
        }
        .box div:nth-child(odd){
            background-color: blueviolet;
        }
        .box div:nth-child(1){
            animation-name: move;
            /* 动画时长 */
            animation-duration: 1s;
        }
        .box div:nth-child(2){
            animation-name: move;
            animation-duration: 1s;
            animation-delay: .5s;
        }
        .box div:nth-child(3){
            animation-name: move;
            animation-duration: 1s;
            /* 动画运动速率 */
            animation-timing-function: linear;
        }
        .box div:nth-child(4){
            animation-name: move;
            animation-duration: 1s;
            /* 动画运动次数，默认动画只会执行一次 */
            /* infinite 无限次 */
            animation-iteration-count: 2;
        }
        .box div:nth-child(5){
            animation-name: move;
            animation-duration: 2s;
            /* 动画播放状态
            默认是从第一帧到最后一帧，到达最后一帧就直接从第一帧重新开始
            animation-direction
            normal 默认值
            alternate 交替播放，到最后一帧的时候从最后一帧回到第一帧
            reverse 反向播放
            alternate-reverse 反向交替

            确认播放状态的时候一定要确认播放次数大于2才会生效
            */
            animation-iteration-count: 2;
            animation-direction: alternate;
        }
        /* 动画结束后保留状态 animation-fill-mode
            可选值：forwards 保持最后一帧的位置
        */
        /* 创建关键帧动画 */
        .box div:nth-child(6){
            /* 复合写法
            animation：name duration(时间) timing-function(速度) delay(延迟)
            iteration-count(播放次数) direction(播放状态) fill-mode(最后一帧位置)
            */
            animation: move 1s linear 3 alternate forwards;
        }
        @keyframes move {
            0%{
                margin-left: 0px;
            }
            100%{
                margin-left: 400px;
            }
        }
        @keyframes bg {
            /* 这种写法只能规定第一帧和最后一帧 */
            from{
                background-color: blueviolet;
            }
            to{
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>
    <!-- 主动式动画与触发式动画的区别在于主动式不需要进行触发，可以直接执行
        主动式动画必须操作
        1）必须规定好一个完整动画，包括第一帧和最后一帧
        2）手动创建的动画必须要有动画名称
        3）动画必须要有动画时长
        4）只要是数值变化的样式都支持动画，除了display

        主动式动画在动画添加的那一刻会触发
    -->
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>